<template>  
  <div class="home-container">  
    <header>  
      <h1>新中国成立史</h1>  
    </header>  
    <Sidebar></Sidebar>
    <nav>  
      <ul>  
        <li><a href="/">主页</a></li>
        <li><a href="/prelude">新中国成立前奏</a></li>  
        <li><a href="/founding">新中国成立经过</a></li>  
        <li><a href="/significance">新中国成立意义</a></li>  
      </ul>  
    </nav>  
    <main>  
      <Feature  
        :title="featureTitle"  
        :description="featureDescription"  
      />  
      <Timeline  
        :title="timelineTitle"  
        :events="timelineEvents"  
      />  
      <section class="intro">  
        <h2>历史亮点</h2>  
        <img src="/images/5001.jpg" class="history-image">
        <p class="image-caption">图为新中国成立的重要历史时刻。</p>  
        <p>在这里，您将了解到新中国成立的历史进程和重大意义。请通过上方导航栏选择您想了解的部分。</p>  
        <div class="highlight-images">  
          <div class="highlight-item" v-for="(item, index) in highlightItems" :key="index">  
            <img :src="item.imageUrl" :alt="item.alt" class="history-image">  
            <p class="image-caption">{{ item.caption }}</p>  
            <router-link :to="item.link" class="detail-button">查看详情</router-link>  
          </div>  
        </div> 
      </section>  
      <section class="history-highlights">  
        <h2>简要概括</h2>  
        <p>中华人民共和国的成立，揭开了中国历史新的篇章。领导和组织人民革命取得胜利的中国共产党，成为在全国范围执掌政权的党，踏上了带领人民创造幸福美好生活的新征程。党的历史也揭开了新的篇章。 10月1日这一天，成为中华人民共和国国庆日。 [4]
中华人民共和国的成立，彻底结束了旧中国半殖民地半封建社会的历史，彻底结束了旧中国一盘散沙的局面，彻底废除了列强强加给中国的不平等条约和帝国主义在中国的一切特权，实现了中国从几千年封建专制统治向人民民主的伟大飞跃，实现了中国高度统一和各民族空前团结。中国人从此站立起来了！中国人民从此把命运牢牢掌握在自己手中，成为国家、社会和自己命运的主人！中华民族发展进步从此开启了新纪元！ [4]
中华人民共和国的成立，是具有世界意义的大胜利。它冲破了帝国主义的东方战线，极大地改变了世界的政治格局，壮大了世界和平民主和社会主义的力量，对世界历史进程产生了深远的影响。 [4]
中华人民共和国的成立，是马克思列宁主义在中国的胜利，是马克思列宁主义的普遍原理和中国革命的具体实践相结合的思想即毛泽东思想的胜利。这个胜利，使马克思列宁主义、毛泽东思想在中国人民中获得很高的威信，被接受为人民共和国各项事业的指导思想，在世界范围内也扩大了它的影响。 [4]
实践充分说明，历史和人民选择了中国共产党，没有中国共产党领导，民族独立、人民解放是不可能实现的。中国共产党和中国人民以英勇顽强的奋斗向世界庄严宣告，中国人民从此站起来了，中华民族任人宰割、饱受欺凌的时代一去不复返了，中国发展从此开启了新纪元。 [2]  </p>
      </section>  
    </main>  
    <footer>  
      &copy; 2024 新中国成立史网页版权所有  
    </footer>  
  </div>  
</template>  

<script>  
import Feature from './Feature.vue';  
import Sidebar from './Sidebar.vue';
import Timeline from './Timeline.vue';  

export default {  
  name: 'Home',  
  components: {  
    Feature,  
    Timeline ,
    Sidebar 
  },  
  data() {  
    return {  
      featureTitle: '主要特征',  
      featureDescription: '中华人民共和国的成立，彻底结束了旧中国半殖民地半封建社会的历史，彻底结束了旧中国一盘散沙的局面，彻底废除了列强强加给中国的 不平等条约 和 帝国主义 在中国的一切特权，实现了中国从几千年封建专制统治向 人民民主 的伟大飞跃，实现了中国高度统一和各民族空前团结。',  
      timelineTitle: '重要时间线',  
      timelineEvents: [  
        { date: '1949年10月1日', description: '中华人民共和国成立', imageUrl: '/images/5002.png' },  
        { date: '1950年代', description: '土地改革和社会主义改造', imageUrl: '/images/5003.png' },  
        { date: '1960年代', description: '文化大革命开始', imageUrl: '/images/5004.png' },  
        { date: '1978年', description: '改革开放政策的实施', imageUrl: '/images/5005.png' },  
      ],  
      highlightItems: [  
        { imageUrl: '/images/5011.png', alt: '历史事件1', caption: '七届二中全会', link: '/highlight1' },  
        { imageUrl: '/images/5012.png', alt: '历史事件2', caption: '开国大典', link: '/highlight2' },  
        { imageUrl: '/images/5013.png', alt: '历史事件3', caption: '平津战役', link: '/highlight3' },  
      ]  
    };  
  }  
}  
</script>  
<style scoped>
@import url('../CSS/main.css');
</style>
<style>  
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  /* 添加背景图及相关样式 */
  background-image: url('/images/5006.png'); /* 将这里替换为你实际的背景图路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 设置透明度 */
  background-color: rgba(255, 255, 255, 0.4); /* 白色半透明，可根据需求调整颜色和透明度值 */
}
.intro h2, .history-highlights h2 {  
  color: #d21034;  
}  

.history-image {  
  max-width: 80%;  
  height: 250px;  
  border: 1px solid #ddd;  
  margin-top: 20px;  
  object-fit: cover; /* 确保图片按比例裁剪，填充整个区域 */  
  border: 1px solid #ddd; /* 边框样式 */  
  margin-top: 20px; /* 上边距 */  
}  

.image-caption {  
  text-align: center;  
  color: #666;  
  margin-top: 5px;  
}  

.history-highlights {  
  display: flex; /* 使用 flexbox 排列图片 */  
  flex-direction: column; /* 纵向排列标题和描述 */  
}  

.highlight-images {  
  display: flex; /* 横向排列图片 */  
  justify-content: space-around; /* 均匀分布 */  
  margin-top: 20px;  
}  

.highlight-item {  
  text-align: center; /* 图片和按钮居中 */  
  margin: 0 10px; /* 每个项目的间距 */  
}  

.detail-button {  
  display: inline-block;  
  margin-top: 10px;  
  padding: 8px 12px;  
  background-color: #007bff;  
  color: white;  
  text-decoration: none;  
  border-radius: 4px;  
  transition: background-color 0.3s;  
}  

.detail-button:hover {  
  background-color: #0056b3; /* 悬停时改变背景色 */  
}  


</style>